<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--指令：属性（v-）-->
    <!--解决代码闪烁的问题：代码先执行html-->
    <style>
        [v-cloak]{
            display: none;
        }
        span{
            color: red;
        }
    </style>
    
</head>
<body>
    <!--2.id='app'-->
    <div id="app" v-cloak>
        <p>{{name}}</p>
        <!--v-text指令用于将数据填充到标签中,没有闪动,会将html标签一并输出-->
        <p v-text="name"></p>
        <p v-html="name"></p>
        <!--插值表达式-->
        <!--v-pre不解析-->
        <p v-pre>{{msg}}</p>
        <input type="text" v-model="age">
        <!--执行**一次性**的插值【当数据改变时，插值处的内容不会继续更新】-->
        <p v-once>{{age}}</p>
        <!--表单元素 input select textarea-->
        <input type="text" v-model="msg" v-once>
        <p>{{msg}}</p>

        <h3>data中存放对象</h3>
        <div>
            <p>{{person.name}}</p>
        </div>
        <button v-on:click="add()">年龄+1</button>

        <h4>{{stu.name}},的年龄是,{{stu.age}}</h4>
        <button v-on:click="addF()">年龄+10</button>
        <!--简写形式-->
        <button @click="addF()">年龄+10</button>
        <!--传参-->
        <h4 @click="change('让中国再次伟大','美国总统')">川普的竞选口号是</h4>
        <p>{{info}}</p>
        <!--阻止冒泡和阻止默认事件-->
        <a href="" @click="aclick">拼多多</a>
        <p @click.stop>阻止冒泡</p>
        <!--键盘事件-->
        <button @click="submit()">键盘提交事件</button>
        <!-- <button >键盘提交事件13</button> -->
        <input type="text" v-on:keyup.13="submit()">
    </div>
</body>
<!--1.引入vue.js文件-->
<script src="js/vue.js"></script>
<!--3.vue语法-->
<script>
    // 3.1 实例化一个vue对象
    var vm = new Vue({
        el:'#app',
        data:{
            info:'MAKE AMERICA GRAET AGAIN',
            msg:'今天开始学习vue了',
            name:'<span>吴宇</span>',
            age:'17',
            person:{
                name:'詹振',
                age:45,
            },
            stu:{
                name:"范冰冰",
                age:37
            }
        },
        methods: {
            add:function(){
                this.age++
            },
            addF:function(){
                this.stu.age += 10;
            },
            change:function(arg,par){
                this.info = arg + ',by:'+ par
            },
            aclick(event){
                event.preventDefault();
                
                console.log(event);
            },
            submit(){
                alert('提交')
            }
        },

    })
</script>
</html>